<template>
  <div class="header">
    
  <div class="l-content">
      
    <!-- 这个点击事件是控制菜单组件的收缩的-->
    <el-button size="small" @click="handleCollapase">
      <!-- 图标的展示,这里我们使用动态组件来展示图标-->
     <component class="icons" is="menu"></component>
    </el-button>
        
        <!-- 面包屑，separator是分隔符-->
    <el-breadcrumb separator="/" class="bread">
      <!-- 首页是一定存在的所以直接写死 -->
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <!-- if判断一定要加-->
      <el-breadcrumb-item v-if="current" :to="current.path" >{{
        current.label
      }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  
    <!--右侧用户头像-->
  <div class="r-content">
    <el-dropdown>
      <span>
          <!--我们定义一个URl对象地址，这里是传入图片的名称-->
        <img :src="getImgUrl(`user`)"  class="user" />
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item @click="goLogin">退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
 </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted} from 'vue'
import {userAllDateStore} from '../stores/index'
import { useRouter } from 'vue-router'

const router = useRouter()
const getImgUrl = (user)=>{
    return new URL(`../assets/images/${user}.png`,import.meta.url).href
}

const store = userAllDateStore()

const handleCollapase = ()=>{
    store.state.isCollapase = !store.state.isCollapase
}

// 跳转到登录界面
const goLogin = ()=>{
  router.push("/login")
}

</script>


<style scoped lang="less">


.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #333;
}

.icons {
    width: 20px;
    height: 20px;
}

.bread {
    margin-left: 10px;
}

.l-content {
    display: flex;
    align-items: center;
    .el-button {
        margin-right: 20px;

    }
}

.r-content {
    .user {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
}

:deep(.bread span) {
    color:#fff !important;
    cursor: pointer !important;
}
</style>